<template>
	<div>
		<div style="margin-bottom: 20px;">
			<el-select
				size="mini"
				filterable
				placeholder="时间筛选"
				v-model="selects.timeType"
				style="margin-right: 10px;width:130px;"
				@change="val => refresh({ timeType: val, page: 1 })"
			>
				<el-option label="创建时间" :value="0"></el-option>
				<el-option label="付款时间" :value="1"></el-option>
				<el-option label="结算时间" :value="2"></el-option>
			</el-select>
			<date-picker
				:date="[params.startTime, params.endTime]"
				@change="val => selectTime({ startTime: val[0], endTime: val[1], page: 1 })"
				@refresh="selectTime({ startTime: '', endTime: '', page: 1 })"
			></date-picker>
			<div class="top-btn" :class="TimeIndex == 1 ? 'active' : ''" @click="changeTime(1)">本月</div>
			<div class="top-btn" :class="TimeIndex == 2 ? 'active' : ''" @click="changeTime(2)">上月</div>
			<div class="top-btn" :class="TimeIndex == 3 ? 'active' : ''" @click="changeTime(3)">近三个月</div>
			<div class="top-btn" :class="TimeIndex == 4 ? 'active' : ''" @click="changeTime(4)">全部</div>
		</div>
		<el-row :gutter="20">
			<el-col :span="4" v-for="(item, index) in amount" :key="index">
				<div class="amount-box__li">
					<div class="amount-top">
						<div class="amount-top__title">{{ item.title }}</div>
						<img
							class="amount-top__img"
							:src="
								require(`@/assets/images/icon-service${
									index + 1 > 4 ? 4 : index + 1
								}.png`)
							"
						/>
					</div>
					<div class="amount-money">￥{{ item.money }}</div>
					<div class="amount-num" v-if="index < 3">
						<div>总单数</div>
						<div class="amount-num__n">{{ item.num }}</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<div class="cash-back" @click="jumpCash">
			<div class="order-title">
				<img src="@/assets/images/icon-cash.png" />
				返利订单汇总
			</div>
			<div class="data-list">
				<div class="data-list__li" v-for="(item, index) in cashList" :key="index">
					<div class="data-list__title">{{ item.title }}</div>
					<div class="data-list__money" :style="{ color: index == 0 ? '#6A0DFF' : '' }">
						￥<span>{{ item.money }}</span>
					</div>
					<div class="data-list__num" v-if="index < 3">订单数 {{ item.num }}</div>
				</div>
			</div>
		</div>
		<div class="cash-back" @click="jumpBybt">
			<div class="order-title">
				<img src="@/assets/images/icon-bybt.png" />
				百亿补贴订单汇总
			</div>
			<div class="data-list">
				<div class="data-list__li" v-for="(item, index) in bybtList" :key="index">
					<div class="data-list__title">{{ item.title }}</div>
					<div class="data-list__money" :style="{ color: index == 0 ? '#FFBD04' : '' }">
						￥<span>{{ item.money }}</span>
					</div>
					<div class="data-list__num" v-if="index != 2">订单数 {{ item.num }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import DatePicker from '@/components/common/date-picker2';
import moment from 'moment';
import appRefresh from '@/utils/appRefresh.js';

export default {
	data() {
		return {
			selects: {
				timeType: 0,
				isFree: '',
				isTLJ: '',
				status: '',
				source: null
			},
			amount: [
				{
					title: '销售额',
					money: 0,
					value: '总单数',
					num: '0'
				},
				{
					title: '总有效佣金',
					money: 0,
					value: '总单数',
					num: '0'
				},
				{
					title: '总免单佣金',
					money: 0,
					value: '总单数',
					num: '0'
				},
				{
					title: '总返利佣金',
					money: 0
				},
				{
					title: '总淘礼金消耗',
					money: 0
				},
				{
					title: '总利润',
					money: 0
				}
			],
			cashList: [
				{
					title: '销售额',
					money: '0',
					num: '0'
				},
				{
					title: '有效佣金',
					money: '0',
					num: '0'
				},
				{
					title: '免单佣金',
					money: '0',
					num: '0'
				},
				{
					title: '返利佣金',
					money: '0'
				},
				{
					title: '淘礼金消耗',
					money: '0'
				},
				{
					title: '利润',
					money: '0'
				}
			],
			bybtList: [
				{
					title: '销售额',
					money: '0',
					num: '0'
				},
				{
					title: '有效佣金',
					money: '0',
					num: '0'
				},
				{
					title: '淘礼金消耗',
					money: '0'
				},
				{
					title: '利润',
					money: '0'
				}
			],
			params: {
				startTime: moment()
					.startOf('month')
					.format('YYYY-MM-DD 00:00:00'),
				endTime: moment().format('YYYY-MM-DD 23:59:59'),
				page: 0,
				size: 0,
				type: 'revenue'
			},
			TimeIndex: 1
		};
	},
	components: {
		DatePicker
	},
	mounted() {
		this.refresh();
		appRefresh.$on('refresh', () => {
			this.refresh();
		});
	},

	methods: {
		async refresh() {
			await this.getCash({
				...this.params
			});
			await this.getBybt({
				...this.params
			});
			this.$nextTick(() => {
				this.getHeader();
			});
		},
		selectTime(params) {
			this.params = Object.assign(this.params, params);
			this.refresh();
		},
		changeTime(i) {
			var start = '';
			var end = '';
			this.TimeIndex = i;
			switch (i) {
				case 1:
					start = moment()
						.startOf('month')
						.format('YYYY-MM-DD 00:00:00');
					end = moment().format('YYYY-MM-DD 23:59:59');
					break;
				case 2:
					start = moment()
						.month(moment().month() - 1)
						.startOf('month')
						.format('YYYY-MM-DD 00:00:00');
					end = moment()
						.month(moment().month() - 1)
						.endOf('month')
						.format('YYYY-MM-DD 23:59:59');
					break;
				case 3:
					start = moment()
						.subtract(3, 'month')
						.format('YYYY-MM-DD 00:00:00');
					end = moment().format('YYYY-MM-DD 23:59:59');
					break;
				case 4:
					start = '';
					end = '';
					break;
			}
			this.params.startTime = start;
			this.params.endTime = end;
			this.refresh();
		},
		getCash(params) {
			return this.$service.statisticalForm.orderList
				.page(params)
				.then(res => {
					if (res.subData) {
						this.cashList[0].money = res.subData.orderAmount || 0;
						this.cashList[0].num = res.subData.orderNum || 0;
						this.cashList[1].money = res.subData.validCommissionTotal || 0;
						this.cashList[1].num = res.subData.validOrderNum || 0;
						this.cashList[2].money = res.subData.mdCommissionTotal || 0;
						this.cashList[2].num = res.subData.mdOrderNum || 0;
						this.cashList[3].money = res.subData.validCommission || 0;
						this.cashList[4].money = res.subData.tljMoney || 0;
						this.cashList[5].money = (
							res.subData.validCommissionTotal -
							res.subData.validCommission -
							res.subData.tljMoney
						).toFixed(2);
					} else {
						this.cashList[0].money = 0;
						this.cashList[0].num = 0;
						this.cashList[1].money = 0;
						this.cashList[1].num = 0;
						this.cashList[2].money = 0;
						this.cashList[2].num = 0;
						this.cashList[3].money = 0;
						this.cashList[4].money = 0;
						this.cashList[5].money = 0;
					}
				})
				.catch(err => {
					console.error(err);
					this.$message.error(err);
				});
		},
		getBybt(params) {
			return this.$service.statisticalForm.orderList
				.million(params)
				.then(res => {
					this.bybtList[0].money = res.subData.orderAmount || 0;
					this.bybtList[0].num = res.subData.orderNum || 0;
					this.bybtList[1].money = res.subData.validCommission || 0;
					this.bybtList[1].num = res.subData.validOrderNum || 0;
					this.bybtList[2].money = res.subData.tljMoney || 0;
					this.bybtList[3].money = (
						res.subData.validCommission - res.subData.tljMoney
					).toFixed(2);
				})
				.catch(err => {
					console.error(err);
					this.$message.error(err);
				});
		},
		getHeader() {
			this.amount[0].money = (
				Number(this.cashList[0].money) + Number(this.bybtList[0].money)
			).toFixed(2);
			this.amount[0].num = Number(this.cashList[0].num + this.bybtList[0].num).toFixed(2);
			this.amount[1].money = (
				Number(this.cashList[1].money) + Number(this.bybtList[1].money)
			).toFixed(2);
			this.amount[1].num = this.cashList[1].num + this.bybtList[1].num;
			this.amount[2].money = this.cashList[2].money || 0;
			this.amount[2].num = this.cashList[2].num || 0;
			this.amount[3].money = this.cashList[3].money || 0;
			this.amount[4].money = (
				parseFloat(this.cashList[4].money) + parseFloat(this.bybtList[2].money)
			).toFixed(2);
			this.amount[5].money = (
				parseFloat(this.cashList[5].money) + parseFloat(this.bybtList[3].money)
			).toFixed(2);
		},
		jumpCash() {
			let arr = [this.params.startTime, this.params.endTime];
			this.$router.push({
				path: '/revenue/report-cash',
				query: {
					arr
				}
			});
		},
		jumpBybt() {
			let arr = [this.params.startTime, this.params.endTime];
			this.$router.push({
				path: '/revenue/report-bwbt',
				query: {
					arr
				}
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.top-btn {
	display: inline-block;
	border: 1px solid #d9d9d9;
	border-radius: 4px;
	font-size: 14px;
	color: #595959;
	background: #ffffff;
	padding: 3px 25px;
	margin-left: 8px;
	cursor: pointer;
	&.active {
		border-color: #b3d8ff;
		color: #409eff;
	}
}
.amount-box__li {
	height: 154px;
	border-radius: 8px;
	background: #ffffff;
	padding: 14px 21px 13px 24px;

	.amount-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		&__title {
			color: #8c8c8c;
			font-size: 14px;
		}
		&__img {
			width: 35px;
			height: 35px;
			border-radius: 50%;
		}
	}
	.amount-money {
		font-size: 30px;
		border-bottom: 1px solid #e8e8e8;
		padding-bottom: 17px;
		margin-top: 10px;
	}
	.amount-num {
		color: #575757;
		font-size: 14px;
		display: flex;
		align-items: center;
		margin-top: 11px;
		.amount-num__n {
			margin-left: 7px;
		}
	}
}
.amount-box__li:nth-child(1) .amount-money {
	color: #f02b2b;
}
.amount-box__li:nth-child(2) .amount-money {
	color: #cb38ac;
}
.amount-box__li:nth-child(3) .amount-money {
	color: #ffbd04;
}
.amount-box__li:nth-child(4) .amount-money {
	color: #0184fe;
}
.cash-back {
	width: 100%;
	height: 208px;
	background: #ffffff;
	border-radius: 8px;
	margin-top: 20px;
}
.order-title {
	display: flex;
	align-items: center;
	padding: 16px 24px;
	border-bottom: 1px solid #e9e9e9;
	font-size: 16px;
	img {
		width: 14px;
		height: 14px;
		margin-right: 14px;
	}
}
.data-list {
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin-top: 25px;
	.data-list__li {
		margin-left: 24px;
		.data-list__title {
			color: #7e7e7e;
			font-size: 14px;
		}
		.data-list__money {
			color: #000000;
			font-size: 16px;
			margin-top: 11px;
			font-weight: 600;
			span {
				font-size: 24px;
			}
		}
		.data-list__num {
			font-size: 14px;
			color: #575757;
			margin-top: 9px;
		}
	}
}
</style>
